<template>
  <div @keyup.enter="login">
    <img alt="..." class="login-container" src="../assets/img/background.902e6b43.png">
    <div class="LoginWindow rounded">
      <div style="width: 100%;text-align: center;">
        <img alt="..." src="../assets/img/logo1.2459363d.png">
      </div>
      <div>
        <form class="login">
          <p>
            <label>帐号:</label>
            <input type="text" v-model="user.username" required>
          </p>
          <p>
            <label>密码:</label>
            <input type="password" v-model="user.password" required>
          </p>
          <p>
            <label>验证码:</label>
            <input type="text" v-model="user.code" required style="width: 200px;">&nbsp;&nbsp;&nbsp;
            <i @click="refreshCode()" style="position: fixed;">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </i>
          </p>
          <p class="login-submit">
            <button type="button" class="login-button" @click="login">Login</button>
          </p>
        </form>
      </div>
    </div>
    <span class="login-footer">© 2022 - 品达物流集团</span>
  </div>
</template>

<script>
import '../main/css/Login_style.css'
import SIdentify from '../sldentify/SIdentify'
import loginAPI from "../api/basicfunction/basiclogin/loginAPI";

export default {
  name: 'Login',
  components: {
    SIdentify
  },
  data() {
    return {
      fullscreenLoading: false,/*加载中*/
      user: {},
      identifyCode: '',
      identifyCodes: '123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' // 绘制的随机数
    }
  },
  methods: {
    login() {
      if (this.user.username == null) {
        this.$message.error('请填写账号！！')
      } else if (this.user.password == null) {
        this.$message.error('请填写密码！！')
      } else if (this.user.code == null) {
        this.$message.error('请填写验证码！！')
      } else {
        if (this.identifyCode.toUpperCase() === this.user.code.toUpperCase()) {
          this.$store.commit("startAnimation", true);
          // 获取ip，地址，运行商
          this.$axios.get(`https://2022.ipchaxun.com/`).then(({data}) => {
            this.user.ip = data.ip
            this.user.addressInfo = data.data.join('-')
            loginAPI.login(this.user).then(data => {
              if (data.data.code === 200) {
                console.log("成功:")
                console.log(data.data.message)
                this.$store.commit("login", data.data.data);
                this.$store.commit("startAnimation", false);
                this.$router.replace({path: '/home'}) // 不适用push是因为上一步不会回到登录界面,不会添加跳转记录
                // 弹出登录成功
                this.$message({
                  message: '登录成功',
                  type: 'success'
                })
              } else {
                console.log("失败：")
                console.log(data.data)
                this.user.password = null
                this.user.code = null
                this.refreshCode()
                this.$message.error(data.data.message)
              }
            })
          })
        } else {
          this.user.code = null
          this.refreshCode()
          this.$message.error('验证码不正确！！')
        }
      }
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    randomNum(min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode(data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    }
  },
  created() {
    this.refreshCode()
  }
}
</script>
<style scoped>
input[type=text], input[type=password] {
  padding: 0 10px;
  width: 300px;
  height: 40px;
  color: #bbb;
  text-shadow: 1px 1px 1px black;
  background: rgba(0, 0, 0, 0.16);
  border: 0;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
}

input, button {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type=text]:focus, input[type=password]:focus {
  color: white;
  background: rgba(0, 0, 0, 0.1);
  outline: 0;
}

.login-container {
  position: fixed;
  float: left;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 65%;
}

.login-footer {
  position: absolute;
  z-index: 1;
  font-size: 13.5px;
  width: 100%;
  text-align: center;
  bottom: 20px;
}
</style>
